@import '../../assets/css/theme.less';
#chatbox {
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  border-radius: 0 10px 0 0;
  -webkit-app-region: no-drag;
  .chatbox {
    position: relative;
    .opensidebar{
      position: absolute;
      top:40%;transform: translateY(-50%);
      right:0;
      width:12px;height:140px;line-height: 140px;text-align: center;
      background:@assist_color;z-index: 9999;
      border-radius: 5px 0 0 5px;
      cursor: pointer;
      i{
        font-size: 12px;
      }
      opacity: 0;
      transition: all 0.2s;
      &:hover{
        opacity: 1;
      }
      &.active{
        i{
          transform: scaleX(-1);
        }
      }
    }
    width: 0;
    flex-grow: 100;
    display: flex;
    flex-direction: column;
    &.opensidebar {
      flex-grow: 72;
    }
    .top {
      flex-basis: 39px;
      flex-shrink: 0;
      height: 0;
      border-bottom: 1px solid #f0f0f0;
      padding: 0 10px;
      .name {
        font-size: 16px;
        font-weight: 600;
        line-height: 39px;
        user-select: text;
        span {
          font-size: 12px;
          line-height: 24px;
          padding-left: 10px;
          color: #999;
          font-weight: 400;
          user-select: none;
        }
      }
    }
    .chat {
      flex-grow: 1;
      height: 0;
      -webkit-app-region: no-drag;
      .chat_list{
        height:100%;overflow: hidden;
      }
      
    }
    .toolsbar{
      height:30px;margin-top: 5px;
      padding:0 10px;
      .item{
        width:25px;height:25px;text-align: center;line-height: 25px;
        font-size: 24px;cursor: pointer;
        &:hover{
          font-weight: 600;
        }
      }
      .ivu-poptip-popper[x-placement=top-start]{
        .ivu-poptip-arrow{
          left:6px;
        }
      }
      .facelist{
        display: flex;
        flex-wrap: wrap;
        width:calc(26px * 15);
        .img{
          width:26px;height:26px;font-size: 0;cursor: pointer;
          &:hover{
            background:#ddd;
          }
          img{
            margin: 1px;
          }
        }
      }
    }
    .btn_list{
      height:30px;
      display: flex;
      padding: 0 5px;
      justify-content: flex-end;
      align-items: center;
      .send{
        height:25px;
        background:@theme_color;
        color:#fff;
        border:none;
        line-height: 25px;
        width:70px;
        cursor: pointer;
        outline: none;
        &:active{
          opacity: 0.8;
        }
      }
      span{
        padding:0 10px;font-size: 12px;color:#999;
      }
    }
  }
  .userinfo {
    width: 0;
    flex-grow: 0;
    border-left: 1px solid #dcdee2;
    overflow: hidden;
    border-radius: 0 10px 0 0;
    display: flex;
    flex-direction: column;
    &.opensidebar {
      flex-grow: 28;
      min-width: 200px;
      max-width: 260px;
    }
    .top{
      display: flex;
      justify-content: space-around;
      flex-shrink: 0;
      padding:10px 20px;
      border-radius: 0 10px 0 0;
      .item{
        display: flex;
        flex-direction: column;
        align-items: center;
        -webkit-app-region: no-drag;
        opacity: 0.5;
        cursor: pointer;
        &.active{
          opacity: 1;
        }
        .icon{
          width:40px;height:40px;
          display: flex;justify-content: center;align-items: center;
          color:#fff;border-radius:50%;
          i{
            font-size: 24px;
          }
        }
        &:nth-child(1) .icon{
          background:@_theme_color;
        }
        &:nth-child(2) .icon{
          background:@theme_color;
        }
        span{
          color:#525252;white-space: nowrap;
        }
      }
    }
    .contbox{
      flex-grow: 1;
      display: none;
      overflow: hidden;overflow-y: auto;
      &.active{
        display: block;
      }
      &.used_reply{
        width:100%;height:100%;
        -webkit-app-region: no-drag!important;
        .ivu-collapse-header{
          height:24px;line-height: 24px;padding-left: 5px;
          .ivu-icon{
            font-size: 18px;margin-right: -5px;
            position: relative;top:-1px;
          }
        }
        .ivu-collapse-content{
          padding:0 5px;
        }
        .ivu-collapse{
          border:none;
          .ivu-collapse-item{
            border:0;
            .ivu-collapse-content-box{
              padding:0;
            }
          }
        }
        .reply_item{  
          background:#f5f5f5;
          margin:5px;
          padding:5px;border:1px solid @theme_color;
          border-color: #f5f5f5 #f5f5f5 #f5f5f5 @theme_color;
          border-width: 1px 1px 1px 6px;
          border-radius: 4px;
          cursor: pointer;
          .ivu-tooltip{
            width:100%;
          }
          .text{
            display: flex;
            width:100%;
            max-height:40px;
            align-items: center;
            p{
              width:0;
              flex-grow: 1;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .opt{
              width:14px;
              height:100%;
              flex-shrink: 0;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              i{
                display:block;
                width:14px;
                line-height: 1.2em;text-align: center;
                font-size: 12px;
                color:@theme_color;
                &:hover{
                  font-weight: 600;
                }
              }
              i:nth-child(1){
                font-size: 8px;
                position: relative;
                top:-2px;right:-2px;
              }
            }
          }
          &:hover{
            border-color: @theme_color;
          }
        }
        .add{
          border:1px solid @theme_color;margin:10px 5px;
          padding:3px 5px;text-align: center;
          color:@theme_color;cursor: pointer;
        }
      }
      &.user_info{
        text-align: center;
        .user_tag{
          display: none;
        }
        .heade{
          display: flex;
          justify-content: center;
          padding:10px;
          img{
            width:70px;height:70px;
            border-radius: 50%;
            box-shadow:0px 4px 20px rgba(86, 93, 114, 0.781);
          }
        }
        .name{
          text-align: center;
          font-size: 18px;
          .sex{
            color:#fff;background:red;font-size: 14px;padding:0 10px;border-radius: 10px;
            display: inline-block;transform: scale(0.7);position: relative;
            top:-1px;left:-5px;
            &[type="1"]{
              background:#4282ee;
            }
            &[type="2"]{
              background:#f14965;
            }
          }
        }
        .info{
          display: inline-block;
          text-align: left;
          p{
            &::before{
              content: "·";padding-right: 5px;
              font-weight: 600;
            }
          }
        }
        .tags{
          margin:5px;border:1px solid #efefef;
          padding:5px;
          .tit{
            display: flex;
            justify-content: space-between;
            padding:0 15px;
            width:100%;
            span{
              color:@theme_color;
              cursor: pointer;
              i{
                font-size: 16px;
                font-weight: 600;
                position: relative;
                top:-2px;
              }
            }
          }
          .list{
            text-align: center;padding:5px 0 0;
            overflow: hidden;
            background:#fff;
            max-height:136px;
            &.active{
              max-height:auto;
            }
            .item{
              cursor: pointer;
              margin:5px;
              display: inline-block;
              // position: relative;
              border-radius: 50px;
              height:18px;
              line-height: 16px;
              font-size: 12px;
              text-align: left;
              b{
                color:#fff;
                display: inline-block;
                min-width: 16px;
                height:16px;
                text-align: center;
                line-height: 16px;
                border-radius: 50%;  
              }
              span{
                padding:0 10px 0 5px;
              }
            }
            .more{
              height:30px;line-height: 30px;
              i{
                font-size: 20px;display: inline-block;
                text-align: center;transition: all 0.2s;cursor: pointer;
              }
              &.active i{
                transform: scaleY(-1)
              }
            }
          }
        }
        .extra{
          padding:0 10px 10px;
          .tit{
            font-size: 16px;
          }
          .input{
            display: flex;
            margin:5px 0;
            span{
              flex-shrink: 0;
            }
            input{
              flex-grow: 1;outline: none;margin-left: 5px;
              width:100%;
            }
            textarea{
              flex-grow: 1;outline: none;margin-left: 5px;
            }
          }
        }
      }
    }
  }
  .ivu-split-wrapper{
    .ivu-split-trigger-horizontal{
      .ivu-split-trigger-bar-con{
        display: none;
      }
      border-bottom: none;background:none;
    }
    .demo-split-pane{
      height:100%;
    }
  }
}

.all_chatlog{
  .top{
    padding:5px;
    .tags{
      margin:5px;
    }
  }
  .group{
    padding:15px 5px 5px;border-radius: 5px;border:1px solid #dcdee2;position: relative;
    margin:10px 0;
    .tit{
      position: absolute;top:-8px;left:10px;height:12px;padding:1px 5px;
      background:#fff;
    }
    .item{
      margin:5px;
    }
  }
}
